<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <template v-for="item in menuItems">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                <template #title>{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-if="!subItem.subs" :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
    collapse() {
      return this.$store.state.collapse;
    },
    menuItems() {
      const username = localStorage.getItem("ms_username");
      const routes = this.$router.options.routes.find((r) => r.path === "/");
      if (!routes || !routes.children) {
        return [];
      }
      return this.generateMenu(routes.children, username);
    },
  },
  methods: {
    /**
     * 检查路由是否有权限访问
     */
    hasPermission(route, role) {
      // 如果没有设置 roles，默认所有人可访问
      if (!route.meta || !route.meta.roles) {
        return true;
      }
      // 没有角色信息，默认为管理员
      if (!role) {
        return true;
      }
      // 检查角色是否在允许列表中
      return route.meta.roles.includes(role);
    },

    /**
     * 递归生成菜单项
     */
    generateMenu(routes, role) {
      const menuItems = [];

      routes.forEach((route) => {
        // 跳过隐藏的路由
        if (route.meta && route.meta.hide) {
          return;
        }

        // 检查权限
        if (!this.hasPermission(route, role)) {
          return;
        }

        // 生成菜单项
        const menuItem = {
          title: route.meta ? route.meta.title : route.name,
          icon: route.meta ? route.meta.icon : null,
        };

        // 处理子路由
        if (route.children && route.children.length > 0) {
          const childMenus = this.generateMenu(route.children, role);

          // 如果有可见的子菜单，添加到 subs
          if (childMenus.length > 0) {
            menuItem.subs = childMenus;
            // 对于有子菜单的父项，使用一个唯一标识符作为 index
            menuItem.index = route.name || route.path.replace(/\//g, "-");
          } else {
            // 如果过滤后没有子菜单，跳过这个父路由
            return;
          }
        } else {
          // 对于叶子节点（没有子菜单的路由），使用路由 name 作为 index
          // el-menu 的 router 模式会自动根据 name 进行路由跳转
          menuItem.index = route.name;
        }

        menuItems.push(menuItem);
      });

      return menuItems;
    },
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}
</style>
